<template>
  <div class="collection-page">
    <header class="page-header">
      <h1 class="page-title">收藏列表</h1>
      <van-button type="plain" icon="cross" class="exit-button" @click="exitPage">退出</van-button>
    </header>
    <div class="collection-list">
      <div class="list-item" v-for="item in collectionItems" :key="item.id">
        <div class="item-header">
          <img :src="item.avatar" alt="avatar" class="avatar">
          <div class="item-info">
            <span class="name">{{ item.name }}</span>
            <span class="tag">{{ item.tag }}</span>
            <span class="status">{{ item.status }}</span>
          </div>
        </div>
        <div class="item-details">
          <div class="detail-item">
            <Icon name="star-o" color="#ff9900"/>
            <span>{{ item.score }}分</span>
          </div>
          <div class="detail-item">
            <Icon name="service" color="#333"/>
            <span>已服务: {{ item.served }}单</span>
          </div>
          <div class="detail-item">
            <Icon name="time" color="#333"/>
            <span>最早可约{{ item.earliestTime }}</span>
          </div>
          <div class="detail-item">
            <Icon name="distance" color="#333"/>
            <span>{{ item.distance }}km</span>
          </div>
        </div>
        <div class="item-actions">
          <div class="action-item">
            <Icon name="heart" color="red"/>
            <span>收藏: {{ item.favorites }}</span>
          </div>
          <van-button type="primary" size="small" plain>立即预约</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Icon, Button } from 'vant';

export default {
  components: {
    [Icon.name]: Icon,
    [Button.name]: Button
  },
  data() {
    return {
      collectionItems: [
        {
          id: 1,
          avatar: 'https://example.com/avatar1.jpg',
          name: '唐果',
          tag: '新人',
          status: '可服务',
          score: 3.9,
          served: 123,
          earliestTime: '16:00',
          distance: 1.58,
          favorites: 167
        },
        // 可以添加更多类似对象来填充列表
      ]
    };
  },
  methods: {
    exitPage() {
      this.$router.go(-1); // 返回上一页，或者你可以重定向到其他页面
    }
  }
};
</script>

<style scoped>
.collection-page {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  flex-grow: 1;
}

.exit-button {
  margin-left: auto;
}

.collection-list {
  padding: 20px;
}

.list-item {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
}

.item-header {
  display: flex;
  align-items: center;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}

.item-info {
  display: flex;
  flex-direction: column;
}

.name {
  font-size: 16px;
  font-weight: bold;
}

.tag {
  font-size: 12px;
  color: #999;
}

.status {
  font-size: 12px;
  color: green;
}

.item-details {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.detail-item {
  display: flex;
  align-items: center;
}

.item-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.action-item {
  display: flex;
  align-items: center;
}
</style>
